<template>
  <!-- 下方跳转内容 -->
  <div class="footer">
    <div class="app-container">
      <div class="app-item">
        <img onclick="window.open('https://www.douyin.com/')" src="https://www.douyin.com/favicon.ico" alt="抖音"
          title="抖音" />
      </div>
      <div class="app-item">
        <img class="white-bg" onclick="window.open('https://www.bilibili.com/')"
          src="https://www.bilibili.com/favicon.ico" alt="哔哩哔哩" title="哔哩哔哩" />
      </div>
      <div class="app-item">
        <img class="white-bg" onclick="window.open('https://weibo.com/')" src="https://weibo.com/favicon.ico" alt="微博"
          title="微博" />
      </div>
      <div class="app-item">
        <img onclick="window.open('https://www.zhihu.com/')" src="https://www.zhihu.com/favicon.ico" alt="知乎"
          title="知乎" />
      </div>
      <div class="app-item">
        <img onclick="window.open('https://www.xiaohongshu.com/')" src="https://www.xiaohongshu.com/favicon.ico"
          alt="小红书" title="小红书" />
      </div>
      <div class="app-item">
        <img class="white-bg" onclick="window.open('https://youku.com/')" src="https://youku.com/favicon.ico" alt="优酷"
          title="优酷" />
      </div>
      <div class="app-item">
        <img class="white-bg" onclick="window.open('https://www.goofish.com/')"
          src="https://ts3.cn.mm.bing.net/th?id=ODLS.926d4c1b-8117-4eb0-ba9d-5d557466c78c&w=32&h=32&qlt=90&pcl=fffffa&o=6&pid=1.2"
          alt="闲鱼" title="闲鱼" />
      </div>
      <div class="app-item">
        <img class="white-bg" onclick="window.open('https://v.qq.com/')" src="https://v.qq.com/favicon.ico" alt="腾讯视频"
          title="腾讯视频" />
      </div>
      <div class="app-item">
        <img class="white-bg" onclick="window.open('https://map.baidu.com/')" src="https://map.baidu.com/favicon.ico"
          alt="百度地图" title="百度地图" />
      </div>
      <div class="app-item">
        <img class="white-bg" onclick="window.open('https://ditu.gaode.com/')" src="https://ditu.gaode.com/favicon.ico"
          alt="高德地图" title="高德地图" />
      </div>
    </div>
  </div>
</template>

<script setup>
</script>
<style scoped>
.footer {
  flex: 2;
  display: flex;
  justify-content: center;
  align-items: start;
}

.app-container {
  position: absolute;
  bottom: 10vh;
  left: 26vw;
  width: 40vw;
  height: 10vh;
  border-radius: 10px;
  display: flex;
  justify-content: space-between;
  flex-wrap: nowrap;
}

.app-item>img {
  width: 50px;
  height: 50px;
  margin: 20px;
  cursor: pointer;
  border-radius: 10px;

  box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.1);
}

.app-item>.white-bg {
  background-color: #fff;
}
</style>
